#brim{
  width:50px;
  height:50px;
  z-index:50;
  margin:0;
  padding:0;
  position:fixed;
  top:0px;
  left:0px;
}
#brim:hover #side{
  display:block;
}
#side{
  width:256px;
  height:807px;
  margin:0;
  top:0;
  position:fixed;
  top:0;
  left:0;
  display:none;
  z-index:100;
  background:#fff;
  border:1px solid #888;}
#side1 img{
  width:200px;
  height:158px;
  margin-top:20px;
}
#side1{
  width:200px;
  height:158px;
  margin-top:20px;
  margin-left:25px;
}
#side2{
  margin-top:20px;
}
#side2 ul{
  width:256px;
  margin:0;
  padding:0;
}
#side2 li{
  width:256px;
  height:53.7px;
  margin-top:30px;
  list-style:none;
}
#side2 li:hover{
  background:#00C0FF;
}
#side2 li a{
  width:200px;
  height:40px;
  display:inline-block;
  margin-top:5px;
  margin-left:40px;
  text-decoration:none;
}
#side2 a b{
  color:#999;
  font:15px Arial;
}
#side2 a p{
  color:#000;
  padding:0;
  margin-top:1px;
}
.midd,.midd1,.midd2,.midd3{
  width:414px;
  height:362px;
  margin-top:-200px;
  margin-left:256px;
  background:#fff;
  z-index:3;
  display:none;
}
.midd dt,.midd1 dt,.midd2 dt,.midd3 dt{
  width:400px;
  height:256px;
  display:inline-block;
  margin-left:7px;
  margin-top:7px;
}
.midd img,.midd1 img,.midd2 img,.midd3 img{
  width:400px;
  height:256px;
}
#side2 .midd a,#side2 .midd1 a,#side2 .midd2 a,#side2 .midd3 a{
  display:inline-block;
  width:98px;
  height:30px;
  background:#00C0FF;
  margin-top:30px;
  margin-left:15px;
  text-align:center;
  line-height:30px;
} 
#side2 li:hover .midd,#side2 li:hover .midd1,#side2 li:hover .midd2,#side2 li:hover .midd3{
  display:block;
}
#side2 .midd{
  margin-top:-200px;
  margin-left:256px;
}
